<template>
  <el-card shadow="never">
    <div slot="header" class="clearfix">
      <span>老师</span>
    </div>
    <el-row class="tams-search-container">
      <el-upload style="display: inline-block;" class="upload-demo" ref="upload" action="http://localhost:8080/tea/uploadExcel"
      	:on-change="handleChange" :on-exceed="handleExceed" :on-remove="handleRemove"
      	:before-remove="beforeRemove" :file-list="fileListUpload" :limit="limitUpload"
      	accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
      	:auto-upload="false">
      	<el-button type="primary" size="mini">导入教师数据</el-button>

      </el-upload>
      <a style="display: inline-block; margin-left: 20px;" href="http://localhost:8080/tea/downloadExcel">
      	<el-button  size="mini" icon="el-icon-download"></el-button>
      </a>

      <el-upload style="display: inline-block; margin-left: 50px;" class="upload-demo" ref="upload" action="http://localhost:8080/tc/uploadExcel"
      	:on-change="handleChange" :on-exceed="handleExceed" :on-remove="handleRemove"
      	:before-remove="beforeRemove" :file-list="fileListUpload" :limit="limitUpload"
      	accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
      	:auto-upload="false">
      	<el-button type="primary" size="mini">导入教师——课程数据</el-button>

      </el-upload>
      <a style="display: inline-block; margin-left: 20px;" href="http://localhost:8080/tc/downloadExcel">
      	<el-button  size="mini" icon="el-icon-download"></el-button>
      </a>
        <el-button style="float: right; " type="primary" size="small" class="tams-operate-item" @click="saveTeacherVisible=true">新增教师数据</el-button>
        <el-button style="float: right; margin-right: 20px;" type="primary" size="small" class="tams-operate-item" @click="dialogVisible=true">新增教师课程数据</el-button>
        <el-dialog title="新增教师课程" width="450px"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
                   :visible.sync="dialogVisible"
                   :before-close="handleClose" >
          <el-form ref="form" :model="form2" :rules="rules" label-width="80px" class="tams-form-container">
            <el-form-item label="职工号" prop="teacherId">
              <el-input v-model="form2.teacherId" class="tams-form-item"></el-input>
            </el-form-item>
            <el-form-item label="课程编号" prop="courseId">
              <el-input v-model="form2.courseId" class="tams-form-item"></el-input>
            </el-form-item>
            <el-form-item label="期望时间" prop="expectTime">
              <el-input v-model="form2.expectTime" class="tams-form-item"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialoVisible=false">取消</el-button>
            <el-button type="primary" @click="submitForm(form2)">确定</el-button>
          </div>
        </el-dialog>
    </el-row>
    <div v-loading="loading">
      <el-table stripe border :data="data">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="teacherId" label="职工号"></el-table-column>
        <el-table-column prop="teacherName" label="姓名"></el-table-column>
        <el-table-column prop="teacherRank" label="等级"></el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="$consts.PAGE_SIZES"
        :page-size="size"
        style="margin-top: 10px;"
        layout="total, sizes, prev, pager, next"
        :total="data.total">
      </el-pagination>
    </div>
    <SaveTeacher :visible="saveTeacherVisible"
                 @on-close="saveTeacherVisible=false"
                 @on-success="saveSuccess">
    </SaveTeacher>
    <UpdateTeacher :visible="updateTeacherVisible"
                   :id="id"
                   @on-close="updateTeacherVisible=false"
                   @on-success="updateSuccess">
    </UpdateTeacher>
  </el-card>
</template>
<script>
import { mapActions } from 'vuex'
import SaveTeacher from '@/views/teacher/SaveTeacher'
import UpdateTeacher from '@/views/teacher/UpdateTeacher'

export default {
  name: 'Teacher',
  components: { UpdateTeacher, SaveTeacher },
  data () {
    return {
      rules: {
        name: [
          {
            required: true,
            message: '名称不能为空',
            trigger: 'blur'
          }
        ]
      },
      dialogVisible:false,
      data: [],
      params: {},
      form: {},
      form2: {},
      current: 1,
      size: 10,
      saveTeacherVisible: false,
      updateTeacherVisible: false,
      id: '',
      loading: false,
      fileListUpload: [],
      limitUpload: 1,
    }
  },
  methods: {
    ...mapActions(['GetTeacherPage', 'UpdateTeacherEnableStateById']),
    init () {
      this.params.enableState = 1
    },
    handleClose (done) {
      this.$refs.form.resetFields()
      this.$emit('on-close')
      done()
    },
    submitForm(form2){
      this.$axios({
        url:'http://localhost:8080/tc/addOneTeacher',
        method:'post',
        data:JSON.stringify(form2),
        headers:{
          'Content-Type':'application/json'
        }
      })
      this.$router.go(0)
      this.dialogVisible=false
    },
    handleChange(file, fileList) {
    	// console.log(file)
    	this.fileTemp = file.raw;
    	if (this.fileTemp) {
    		// console.log(this.fileTemp.type)
    		if (this.fileTemp.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
    			this.fileTemp.type == "application/vnd.ms-excel") {
    			this.$refs.upload.submit();
    			this.$router.go(0)
    			// this.importExcel(this.fileTemp)
    		} else {
    			this.$message({
    				type: "warning",
    				message: "附件格式错误，请删除后重新上传!"
    			});
    		}
    	}

    },
    beforeRemove(file, fileList) {
    	return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove(file, fileList) {
    	// console.log(file)
    	this.fileTemp = null;
    },
    handleExceed(files, fileList) {
    	this.$message.warning(
    		`当前限制选择1个文件，本次选择了 ${
    	          files.length
    	        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
    	);
    },
    search () {
      this.params.current = this.current
      this.params.size = this.size
      this.loading = true
      this.GetTeacherPage(this.params).then(res => {
        console.log(res)
        this.loading = false
        if (res) {
          this.data = res.list
          /* console.log(this.data) */
        }
      }).catch(() => {
        this.loading = false
      })
    },
    handleSizeChange (val) {
      this.size = val
      this.search()
    },
    handleCurrentChange (val) {
      this.current = val
      this.search()
    },
    saveSuccess () {
      this.search()
      this.saveTeacherVisible = false
    },
    showUpdate (id) {
      this.id = id
      this.updateTeacherVisible = true
    },
    updateSuccess () {
      this.search()
      this.updateTeacherVisible = false
    },
    updateEnableState (enableState, id) {
      this.UpdateTeacherEnableStateById({ id, enableState }).then(res => {
        this.search()
      })
    }
  },
  mounted () {
    this.init()
    this.search()
  }
}
</script>

<style scoped>

</style>
